<template>
    <div>
        <h1 style="padding: 10px 30px; font-weight: 600;">新增工单</h1>
        <el-card class="box-card">
            <el-form ref="formRef" :model="form" :rules="rules" label-width="150px">
                <el-col :span="23">
                    <el-row :gutter="15">
                        <el-col :span="12">
                            <el-form-item label="任务名称" prop="clientName">
                                <el-input v-model="form.clientName" placeholder="请输入任务名称" />
                            </el-form-item>
                        </el-col>
                        <!-- <el-col :span="12">
                            <el-form-item label="客户经理ID" prop="clientManagerId">
                                <el-input v-model="form.clientManagerId" disabled placeholder="系统自动填写" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="商务经理ID" prop="businessManagerId">
                                <el-input v-model="form.businessManagerId" disabled placeholder="系统自动填写" />
                            </el-form-item>
                        </el-col> -->
                        <!-- <el-col :span="24">
                            <el-form-item label="选择流程" prop="process">
                                <el-select v-model="form.process" placeholder="选择流程">
                                    <el-option label="流程1" value="1" />
                                    <el-option label="流程2" value="2" />
                                    <el-option label="流程3" value="3" />
                                    <el-option label="流程4" value="4" />
                                    <el-option label="流程5" value="5" />
                                </el-select>
                            </el-form-item>
                        </el-col> -->
                        <el-col :span="12">
                            <el-form-item label="委托单位名称" prop="entrustedDepartmentName">
                                <el-input v-model="form.entrustedDepartmentName" placeholder="请输入委托单位名称" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="订单编号" prop="id">
                                <el-input v-model="form.id" disabled placeholder="系统自动填写" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="委托单位地址" prop="unitLocation">
                                <el-input v-model="form.unitLocation" placeholder="请输入委托单位地址" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="开票发票抬头" prop="invoicingInvoiceHeader">
                                <el-input v-model="form.invoicingInvoiceHeader" placeholder="请输入开票发票抬头" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="纳税人识别号" prop="taxpayerNumber">
                                <el-input v-model="form.taxpayerNumber" placeholder="请输入纳税人识别号" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="物种或样品名称" prop="speciesOrSampleName">
                                <el-input v-model="form.speciesOrSampleName" placeholder="请输入物种或样品名称" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="最少的一个样本量" prop="minSampleCount">
                                <el-input v-model="form.minSampleCount" type="number" placeholder="请输入最少的一个样本量" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="样本类型" prop="sampleType">
                                <el-radio-group v-model="form.sampleType">
                                    <el-radio
                                        v-for="dict in sample_type"
                                        :key="dict.value"
                                        :label="parseInt(dict.value)"
                                    >{{dict.label}}</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="委托要求完成时间" prop="entrustedFinishTime">
                                <el-date-picker clearable
                                    v-model="form.entrustedFinishTime"
                                    type="date"
                                    value-format="YYYY-MM-DD"
                                    placeholder="请选择委托要求完成时间">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="是否需要CMA资质" prop="isNeedCma">
                                <el-radio-group v-model="form.isNeedCma">
                                    <el-radio
                                        v-for="dict in yes_or_no"
                                        :key="dict.value"
                                        :label="parseInt(dict.value)"
                                    >{{dict.label}}</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="客户电话" prop="clientPhone">
                                <el-input v-model="form.clientPhone" placeholder="请输入客户电话" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="余样是否退还" prop="isNeedReturn">
                                <el-radio-group v-model="form.isNeedReturn">
                                    <el-radio
                                        v-for="dict in yes_or_no"
                                        :key="dict.value"
                                        :label="parseInt(dict.value)"
                                    >{{dict.label}}</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="数量(平行样需累计)" prop="count">
                                <el-input v-model="form.count" type="number" min="1" placeholder="请输入数量(平行样需累计)" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="选择时间" prop="time">
                                <el-date-picker 
                                    clearable
                                    v-model="form.time"
                                    type="date"
                                    value-format="YYYY-MM-DD "
                                    placeholder="请选择选择时间">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="保存温度" prop="temperature">
                                <el-input v-model="form.temperature" placeholder="请输入保存温度" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="订单时间" prop="orderTime">
                                <el-date-picker clearable
                                    v-model="form.orderTime"
                                    type="datetime"
                                    value-format="YYYY-MM-DD HH:mm:ss"
                                    placeholder="请选择订单时间">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-col>
            </el-form>
        </el-card>

        <el-card class="box-card">
            <h3 style="padding: 10px 30px; font-weight: 550; font-size: 22px;">选择样品组</h3>
            <el-table v-loading="loading" :data="warehousingList" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="入库ID" align="center" prop="id" />
                <el-table-column label="项目名称" align="center" prop="projectName" />
                <el-table-column label="项目编号" align="center" prop="projectCode" />
                <el-table-column label="接样日期" align="center" prop="warehousingDate" width="180">
                    <template #default="scope">
                    <span>{{ parseTime(scope.row.warehousingDate, '{y}-{m}-{d}') }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="收样编号" align="center" prop="warehousingCode" />
                <el-table-column label="送样人ID" align="center" prop="senderId" />
                <el-table-column label="送样人名称" align="center" prop="senderName" />
                <el-table-column label="备注" align="center" prop="remark" />
            </el-table>
            <pagination
                v-show="total>0"
                :total="total"
                v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize"
                @pagination="getList"
            />
        </el-card>

        <el-card class="box-card">
          <h3 style="padding: 10px 30px; font-weight: 550; font-size: 22px;">流程</h3>
          <el-table ref="flowProcessTable" v-loading="flowProcessChild.loading" :data="flowProcessChild.flowProcessList" :current-row-key="flowProcessChild.selectedId" @current-change="handleFlowProcessCurrentChange">
              <el-table-column label="选择" width="55" align="center">
                <template #default="scope">
                  <el-radio 
                    v-model="flowProcessChild.selectedId" 
                    :label="scope.row.id"
                    @change="handleFlowRadioChange(scope.row)"
                    class="radio-hide-text"
                  ></el-radio>
                </template>
              </el-table-column>
              <el-table-column label="流程ID" align="center" prop="id" />
              <el-table-column label="流程名称" align="center" prop="processName" />
              <el-table-column label="备注" align="center" prop="remark" />
              <el-table-column label="创建时间" align="center" prop="createTime" width="180">
                <template #default="scope">
                  <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
                </template>
              </el-table-column>
          </el-table>
          <pagination
            v-show="flowProcessChild.total > 0"
            :total="flowProcessChild.total"
            v-model:page="flowProcessChild.queryParams.pageNum"
            v-model:limit="flowProcessChild.queryParams.pageSize"
            @pagination="getFlowProcessList"
          />
        </el-card >
        <div class="dialog-footer" style="display: flex; justify-content: flex-end; padding: 0 20px 20px 20px; ">
            <el-button type="info" @click="reset">重 置</el-button>
            <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
    </div>
</template>

<script setup>
import { listWarehousing } from "@/api/custom/warehousing"
import { addEntrust_order } from "@/api/entrust_order/entrust_order"
import { reactive, ref } from 'vue'
import { listProcess } from "@/api/flow/process.js"

const { proxy } = getCurrentInstance()
const { sample_type, yes_or_no } = proxy.useDict('sample_type', 'yes_or_no');

// 入库列表加载中
const loading = ref(true)
// 总条数
const total = ref(0)
// 入库列表
const warehousingList = ref([])
// 选中的入库列表
const ids = ref([])

const data = reactive({
    // 表单参数
    form: {},
    // 表单校验
    rules: {
        clientName: [
            { required: true, message: "任务名称不能为空", trigger: "blur" }
        ],
        speciesOrSampleName: [
            { required: true, message: "物种或样品名称不能为空", trigger: "blur" }
        ],
        minSampleCount: [
            { required: true, message: "最少的一个样本量不能为空", trigger: "blur" }
        ],
        entrustedFinishTime: [
            { required: true, message: "委托完成时间必填", trigger: "blur" }
        ],
        orderTime: [
            { required: true, message: "订单时间必填", trigger: "blur" }
        ],
        sampleType: [
            { required: true, message: "样本类型必填", trigger: "blur" }
        ],
        isNeedCma: [
            { required: true, message: "样本类型必填", trigger: "blur" }
        ],
        isNeedReturn: [
            { required: true, message: "样本类型必填", trigger: "blur" }
        ],
        clientPhone: [
            { required: true, message: "客户电话必填", trigger: "blur" },
            { pattern: /^(13[0-9]|14[5-9]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/, message: '请输入正确的手机号', trigger: ['blur', 'change'] }
        ],
    },
    // 查询参数
    queryParams: {
        pageNum: 1,
        pageSize: 10
    }
})

const { queryParams, form, rules } = toRefs(data);

const flowProcessChild = ref({
  loading: true,
  total: 0,
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  },
  flowProcessList: [], //存储流程列表
  selectedId: null,
})

// 表单重置
function reset() {
    form.value = {
        orderId: null,
        businessManagerId: null,
        clientManagerId: null,
        clientName: null,
        entrustedDepartmentName: null,
        unitLocation: null,
        invoicingInvoiceHeader: null,
        taxpayerNumber: null,
        speciesOrSampleName: null,
        minSampleCount: null,
        sampleType: null,
        entrustedFinishTime: null,
        isNeedCma: null,
        clientPhone: null,
        isNeedReturn: null,
        count: null,
        time: null,
        temperature: null,
        orderTime: null,
        flowProcessId: null,
    }
    proxy.resetForm("formRef")
    // 重置流程列表选中状态
    flowProcessChild.value.selectedId = null;
}
/** 提交按钮 */
function submitForm() {
    proxy.$refs["formRef"].validate(valid => {
        if (!valid) return
        console.log('提交的流程Id：', form.value.flowProcessId),
        addEntrust_order({
            entrustOrder: form.value,
            warehousingIds: ids.value
        }).then(response => {
            proxy.$modal.msgSuccess("新增成功")
            reset()
            getList()
            getFlowProcessList()
        })
    })
}
/** 查询工单样品接收入库登记列表 */
function getList() {
    loading.value = true
    listWarehousing(queryParams.value).then(response => {
        warehousingList.value = response.rows
        total.value = response.total
        loading.value = false
    })
}
// 多选框选中数据
function handleSelectionChange(selection) {
    ids.value = selection.map(item => item.id)
}

/** 查询流程列表 */
function getFlowProcessList() {
  return new Promise((resolve, reject) => {
    flowProcessChild.value.loading = true,
    listProcess(flowProcessChild.value.queryParams).then((response) => {
      console.log('获取的流程列表：',response);
      flowProcessChild.value.flowProcessList = response.rows;
      flowProcessChild.value.total = response.total;
      flowProcessChild.value.loading = false;

      resolve();
    }).catch((e) => {
      flowProcessChild.value.loading = false;
      reject(e);
    })
  })
}

/** 查询流程列表单选事件 */
function handleFlowRadioChange(row) {
  flowProcessChild.value.selectedId = row.id;
  form.value.flowProcessId = row.id;
}

getList()
getFlowProcessList()
</script>

<style scoped>
.box-card {
  margin: 0 20px 20px 20px;
}
/* 隐藏单选按钮的文本 */
:deep(.el-radio__label) {
  display: none;
}
/* 选中行样式 */
:deep(.current-row) {
  background-color: #f5f7fa !important;
}
</style>